<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .baba {
            margin: 20px;
            border: 10px solid #000;
            padding: 10px;
            height: 500px;
            width: 500px;
            background-color: aqua;
            position: relative;
        }
        
        .son {
            position: absolute;
            width: 300px;
            height: 300px;
            background-color: pink;
            left: 40px;
            top: 40px;
        }
    </style>
</head>

<body>
    <!-- <button class="btn">dw</button> -->

    <div class="baba">
        <div class="son"></div>
    </div>
    <script>
        // var a = 1;
        // let b = 'hahha';
        // const c = 'xixi';
        // console.log(this.a, this.b, this.c); // 1 undefined undefined

        // let lo = window.location;
        // console.log(lo);
        // console.log(lo.hostname); // ip
        // console.log(lo.href); // 整个地址栏信息
        // console.log(lo.port); // 端口号



        //    lo.replace('http://baidu.com')
        // lo.assign('http://baidu.com')
        // let btn = document.querySelector('.btn');
        // btn.addEventListener('click', function() {
        //     lo.reload(false)
        // })

        //--------------------------------------------------------

        let sc = window.screen;
        console.log(sc.availHeight, sc.availWidth);

        //--------------------------------------------------------

        // let na = navigator.userAgent;
        // console.log(na);

        // if (na.indexOf('Windows' != -1)) {
        //     console.log('sssssss');
        // }

        // if (na.indexOf('iPhone') != -1) {
        //     console.log('aaaaaaaa');
        // }

        // if (na.indexOf('Android') != -1) {
        //     console.log('ccccccccccc');
        // }

        //--------------------------------------------------------

        // let baba = document.querySelector('.baba');
        // let son = document.querySelector('.son');
        // console.log(baba.offsetWidth); // 50+20+20
        // console.log(baba.offsetTop); // 20
        // console.log(son.offsetTop); // 40
        // console.log(baba.offsetParent); // 带有定位的父元素 无定位返回body
        // console.log(son.offsetParent);
    </script>
</body>

</html>